<template>
  <el-dialog
    v-if="visible"
    v-dragDialog="$attrs.drag"
    v-bind="$attrs"
    :visible="visible"
    :before-close="beforeClose"
    @close="close"
    @closed="closed"
    @opened="opened"
    @open="open"
  >
    <div class="title" slot="title">
      <div class="title-text">
        {{ $attrs.title }}
        <div></div>
        <div></div>
      </div>
    </div>
    <slot />
    <template slot="footer">
      <slot name="footer" />
    </template>
  </el-dialog>
</template>
<script>
/**
 * drag 默认可以拖拽
 * $attrs 继承父组件所有属性
 */
export default {
  directives: {
    dragDialog: {
      bind(el, binding, vnode, oldVnode) {
        if (binding.value === undefined) {
          binding.value = true; //默认可以拖拽
        }
        if (!binding.value) return;
        const dialogHeaderEl = el.querySelector(".el-dialog__header");
        const dragDom = el.querySelector(".el-dialog");
        dialogHeaderEl.style.cursor = "move";
        const sty =
          dragDom.currentStyle || window.getComputedStyle(dragDom, null);
        dialogHeaderEl.onmousedown = (e) => {
          const disX = e.clientX - dialogHeaderEl.offsetLeft;
          const disY = e.clientY - dialogHeaderEl.offsetTop;
          let styL, styT;
          if (sty.left.includes("%")) {
            styL =
              +document.body.clientWidth * (+sty.left.replace(/\%/g, "") / 100);
            styT =
              +document.body.clientHeight * (+sty.top.replace(/\%/g, "") / 100);
          } else {
            styL = +sty.left.replace(/\px/g, "");
            styT = +sty.top.replace(/\px/g, "");
          }
          document.onmousemove = function (e) {
            const l = e.clientX - disX;
            const t = e.clientY - disY;
            dragDom.style.left = `${l + styL}px`;
            dragDom.style.top = `${t + styT}px`;
          };
          document.onmouseup = function (e) {
            document.onmousemove = null;
            document.onmouseup = null;
          };
        };
      },
    },
  },
  props: {
    value: {
      type: Boolean,
      default: false,
    },
  },
  watch: {
    value(v) {
      this.visible = v;
    },
  },
  data() {
    return {
      visible: this.value,
    };
  },
  mounted() {
    this.visible = this.value;
  },
  methods: {
    beforeClose(done) {
      done();
      this.$emit("beforeClose", done);
    },
    close() {
      this.visible = false;
      this.$emit("input", this.visible);
      this.$emit("close");
    },
    closed() {
      this.$emit("closed");
    },
    open() {
      this.$emit("open");
    },
    opened() {
      this.$emit("opened");
    },
  },
};
</script>

<style lang="scss" scoped>
.title {
  width: 100%;
  display: flex;
  justify-content: center;
  .title-text {
    display: inline-block;
    text-align: center;
    font-size: 16px;
    font-weight: bold;
    line-height: 1.4;
    div{
      &::after{
        content:"";
        display: block;
        width: 100%;
        height: 1px;
        background: $type-primary;
        margin-top: 2px;
      }
    }
  }
}
/deep/.el-dialog__body{
  padding: 16px;
}
/deep/.el-dialog__headerbtn{
  .el-dialog__close{
    font-size: 25px;
  }
}
</style>